<template>
	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
	
	<view class="container">
		<!-- 顶部导航栏 -->


		<!-- 加载状态 -->
		<view class="loading" v-if="isLoading">
			<view class="spinner"></view>
			<text>加载中...</text>
		</view>

		<!-- 订单内容 -->
		<view class="detail-content" v-if="!isLoading && order">
			<!-- 订单状态 -->
			<view class="order-status">
				<text :class="order.statusClass" class="text13">{{ order.statusText }}</text>
			</view>

			<!-- 订单基本信息 -->
			<view class="info-card">
				<text class="card-title text12">基本信息</text>
				<view class="info-row">
					<text class="info-label text11">订单编号：</text>
					<text class="info-value text11">{{ order.orderNo }}</text>
				</view>
				<view class="info-row">
					<text class="info-label text11">创建时间：</text>
					<text class="info-value text11">{{ order.createTime }}</text>
				</view>
				<view class="info-row text11">
					<text class="info-label text11">服务类型：</text>
					<text class="info-value text11">{{ order.serviceType }}</text>
				</view>
			</view>

			<!-- 客户信息 -->
			<view class="info-card">
				<text class="card-title text12">客户信息</text>
				<view class="info-row ">
					<text class="info-label text11">客户姓名：</text>
					<text class="info-value text11">{{ order.customerName }}</text>
				</view>
				<view class="info-row ">
					<text class="info-label text11">联系电话：</text>
					<text class="info-value text11">{{ order.phone }}</text>
					<button class="action-btn" @click="makePhoneCall">
						拨打
					</button>
				</view>
				<view class="info-row ">
					<text class="info-label text11">服务地址：</text>
					<text class="info-value text11">{{ order.address }}</text>
				</view>
			</view>

			<!-- 服务信息 -->
			<view class="info-card">
				<text class="card-title text12">服务信息</text>
				<view class="info-row ">
					<text class="info-label text11">服务时间：</text>
					<text class="info-value text11">{{ order.serviceTime }}</text>
				</view>
				<view class="info-row text11">
					<text class="info-label text11">服务内容：</text>
					<text class="info-value text11">{{ order.serviceContent }}</text>
				</view>
				<view class="info-row ">
					<text class="info-label text11">产品型号：</text>
					<text class="info-value text11">{{ order.productModel }}</text>
				</view>
				<view class="info-row ">
					<text class="info-label text11">故障描述：</text>
					<text class="info-value text11">{{ order.faultDescription }}</text>
				</view>
			</view>

			<!-- 费用信息 -->
			<view class="info-card">
				<text class="card-title text12">费用信息</text>
				<view class="info-row ">
					<text class="info-label text11">服务费用：</text>
					<text class="info-value text11">¥{{ order.serviceFee }}</text>
				</view>
				<view class="info-row ">
					<text class="info-label text11">材料费用：</text>
					<text class="info-value text11">¥{{ order.materialFee }}</text>
				</view>
				<view class="info-row  total-fee">
					<text class="info-label text11">合计金额：</text>
					<text class="info-value text11">¥{{ (order.amount) }}</text>
				</view>
			</view>
		</view>


		<!-- 操作按钮区 -->
		<view class="operation-bar"  :style="{ paddingBottom: safeAreaInsets.bottom + 'px' }">
			<wd-button type="info" @click="handleCancel">
				取消服务
			</wd-button>
			<wd-button  @click="handlePrimaryAction">
				开始服务
			</wd-button>
		</view>
	</view>
</template>

<script setup>
	import { useFontSizeStore } from '@/stores/fontSizeStore';
	
	const fontSizeStore = useFontSizeStore();
	import {volunteer_startServerApi,volunteer_cancelServerApi} from "@/api/volunteer"
	// import { onLoad } from '@dcloudio/uni-app';


	import {
		ref,
		reactive,
		computed,
		onMounted
	} from 'vue';
	import {
		server_detailApi
	} from "@/api/volunteer";
	import {
		onLoad
	} from '@dcloudio/uni-app';
import router from '../../router';

	// 响应式数据
	const orderNo = ref('');
	const order = ref(null);
	const isLoading = ref(true);
const safeAreaInsets = ref({ bottom: 0 })




	// 获取订单详情 - 从API获取数据
	const fetchOrderDetail = (param) => {
		isLoading.value = true;
		// 使用API获取数据，将orderNo作为id参数传递
		server_detailApi({
			orderNo: param.orderNo
		}).then((res) => {
			try {
				console.log("s:",res)
				if (res.code == 200) {
					order.value = res.data;
				}
			} catch (error) {
				console.error('处理订单详情失败:', error);
				order.value = {};
			} finally {
				isLoading.value = false;
			}
		})
	};

	// 返回按钮点击
	const handleBack = () => {
		uni.navigateBack();
	};

	// 拨打电话
	const makePhoneCall = () => {
		if (order.value && order.value.phone) {
			uni.makePhoneCall({
				phoneNumber: order.value.phone
			});
		}
	};

	// 导航到地址
	const navigateToAddress = () => {
		if (order.value && order.value.address) {
			uni.openLocation({
				address: order.value.address,
				scale: 18,
				name: '服务地址'
			});
		}
	};

	// 主要操作按钮点击
	const handlePrimaryAction = () => {
			volunteer_startServerApi({
				orderNo:"11"
			}).then((res)=>{
				if(res.code==200){
					router.push({
						name:"volunteer_home"
					})
				}
				
			})
	};

	// 取消服务
	const handleCancel = () => {
		uni.showModal({
			title: '提示',
			content: '确定要取消这项服务吗？',
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '服务已取消',
						icon: 'none'
					});
					setTimeout(() => {
					volunteer_cancelServerApi({
						orderNo:"11"
					}).then((res)=>{
						
					})
					}, 1500);
				}
			}
		});
	};
		onMounted(()=>{
			const info = uni.getSystemInfoSync()
	safeAreaInsets.value = info.safeAreaInsets || { bottom: 0 }
		})
	// 页面加载时获取订单编号并加载数据
	onLoad((options) => {

		const {
			orderNo
		} = options;
		fetchOrderDetail(orderNo);
	});
</script>

<style scoped>
	.container {
		min-height: 100vh;
		position: relative;
		padding-bottom: 150rpx;
	}

	/* 导航栏样式 */
	.nav-bar {
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		border-bottom: 1px solid #eee;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.back-btn {
		background: none;
		border: none;
		color: #333;
		font-size: 28rpx;
		cursor: pointer;
		padding: 0;
		display: flex;
		align-items: center;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
	}

	.empty-btn {
		width: 30rpx;
	}

	/* 加载状态 */
	.loading {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 200rpx 0;
	}

	.spinner {
		width: 60rpx;
		height: 60rpx;
		border: 6rpx solid #eee;
		border-top-color: #1890ff;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 30rpx;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	/* 详情内容样式 */
	.detail-content {
		padding: 24rpx;
	}

	/* 订单状态 */
	.order-status {
		background-color: #fff;
		padding: 24rpx;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		text-align: center;
	}

	.status-text {
		display: inline-block;
		padding: 10rpx 30rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: 500;
	}

	.status-pending {
		background-color: #fff7e6;
		color: #fa8c16;
	}

	.status-processing {
		background-color: #e6f7ff;
		color: #1890ff;
	}

	.status-completed {
		background-color: #f6ffed;
		color: #52c41a;
	}

	/* 信息卡片 */
	.info-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin: 0 0 24rpx 0;
		padding-bottom: 16rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	/* 信息行 */
	.info-row {
		display: flex;
		padding: 16rpx 0;
		border-bottom: 1px solid #f5f5f5;
		align-items: flex-start;
	}

	.info-row:last-child {
		border-bottom: none;
	}

	.info-label {
		width: 180rpx;
		color: #666;
		font-size: 28rpx;
		flex-shrink: 0;
		padding-top: 4rpx;
	}

	.info-value {
		flex: 1;
		color: #333;
		font-size: 28rpx;
		word-break: break-all;
		line-height: 1.5;
	}

	/* 操作按钮 */
	.action-btn {
		background-color: #f0f7ff;
		color: #1890ff;
		border: none;
		border-radius: 8rpx;
		padding: 6rpx 16rpx;
		font-size: 24rpx;
		cursor: pointer;
		white-space: nowrap;
		margin-left: 20rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 费用信息 */
	.total-fee {
		margin-top: 10rpx;
	}

	.total-fee .info-label {
		color: #333;
		font-weight: 600;
	}

	.total-fee .info-value {
		color: #f5222d;
		font-weight: 600;
		font-size: 30rpx;
	}

	/* 进度时间线 */
	.progress-timeline {
		position: relative;
		padding-left: 40rpx;
		margin-top: 20rpx;
	}

	.timeline-item {
		position: relative;
		padding-bottom: 40rpx;
	}

	.timeline-dot {
		position: absolute;
		left: -40rpx;
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background-color: #ddd;
		top: 6rpx;
	}

	.timeline-item.completed .timeline-dot {
		background-color: #52c41a;
	}

	.timeline-item.current .timeline-dot {
		background-color: #1890ff;
		width: 32rpx;
		height: 32rpx;
		left: -44rpx;
		top: 2rpx;
	}

	.timeline-content {
		padding-left: 20rpx;
	}

	.step-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.step-time {
		font-size: 24rpx;
		color: #999;
		margin-top: 6rpx;
		display: block;
	}

	.timeline-line {
		position: absolute;
		left: -32rpx;
		top: 30rpx;
		bottom: -40rpx;
		width: 2rpx;
		background-color: #ddd;
	}

	.timeline-item.completed .timeline-line {
		background-color: #52c41a;
	}

	/* 错误状态 */
	.error-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 200rpx 24rpx;
		text-align: center;
	}

	.error-text {
		font-size: 30rpx;
		color: #f5222d;
		margin-bottom: 30rpx;
	}

	.retry-btn {
		background-color: #1890ff;
		color: white;
		border: none;
		border-radius: 8rpx;
		padding: 16rpx 30rpx;
		font-size: 28rpx;
		cursor: pointer;
	}

	/* 底部操作栏 */
	.operation-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 24rpx;
		display: flex;
		gap: 20rpx;
		border-top: 1px solid #eee;
		display: flex;
		justify-content: center;
	}

	.operation-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 8rpx;
		border: none;
		font-size: 30rpx;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cancel-btn {
		background-color: #f5f5f5;
		color: #333;
	}

	.primary-btn {
		background-color: #1890ff;
		color: white;
	}
</style>